import React from 'react';
import { TabBar } from 'antd-mobile';
import './index.less';
import {
	useHistory,
	useLocation,
	MemoryRouter
} from 'react-router-dom';
import {
	AppOutline,
	UserOutline,
	FileOutline,
} from 'antd-mobile-icons';
import { TransitionGroup, CSSTransition } from 'react-transition-group'
export default (props: any) => {
	const tabs = [
		{
			key: '/',
			title: '首页',
			icon: <AppOutline />,
		},
		{
			key: '/shopping',
			title: '本地商店',
			icon: <FileOutline />,
		},
		{
			key: '/person',
			title: '我的',
			icon: <UserOutline />,
		},
	];
	const history = useHistory();
	const location = useLocation();
	const { pathname } = location;
	const setRouteActive = (value: string) => {
		history.push(value);
	};
	const routerType = {
		'POP': 'back',
		'PUSH': 'dg',
		'REPLACE': 'dg'
	}
	return (
		<div className="app">
			<div className="body">
				<TransitionGroup className='transition_wrapper' style={{ width: '100%', height: '100%' }} childFactory={(child:any) => (
					React.cloneElement(child, { classNames: routerType[history.action] })
				)}>
					<CSSTransition key={props.location.pathname} appear timeout={1000}>
						{props.children}
					</CSSTransition>
				</TransitionGroup>
			</div>
			<div className="bottom">
				<TabBar activeKey={pathname} onChange={(value: any) => setRouteActive(value)}>
					{tabs.map((item) => (
						<TabBar.Item key={item.key} icon={item.icon} title={item.title} />
					))}
				</TabBar>
			</div>
		</div>
	);
};
